<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>防抖测试</title>

</head>

<body>
  <button id="throttle">点我节流！</button>
</body>

</html>


<script>
  window.onload = function() {
    // 1、获取按钮，绑定点击事件
    var myThrottle = document.getElementById("throttle");
    myThrottle.addEventListener("click", throttle(sayThrottle));
  }

  // 2、节流函数体
  function throttle(fn) {
    // 4、通过闭包保存一个标记
    let canRun = true;
    return function() {
      // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
      if(!canRun) {
        return;
      }
      // 6、将 canRun 设置为 false，防止执行之前再被执行
      canRun = false;

      fn.call(this, arguments);

      // 7、定时器
      setTimeout( () => {
        // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
        canRun = true;
      }, 1000);
    };
  }

  // 3、需要节流的事件
  function sayThrottle() {
    console.log("节流成功！");
  }

</script>